<template>
  <component
    :is="menuComponent"
    :item="item"
    :full-path="fullPath"
  > 
    <template v-if="item.children && item.children.length">
      <side-item v-for="route in item.children"
                 :key="route.path"
                 :full-path="handlePath(route.path)"
                 :item="route"></side-item>
    </template>
  </component>
</template>

<script>
import path from 'path'
import SubMenu from './subMenu'
import MenuItem from './menuItem'

export default {
  name: 'sideItem',
  components: { MenuItem, SubMenu },
  props: {
    item: {
      type: Object,
      required: true,
    },
    fullPath: {
      type: String,
      default: '',
    },
  },
  computed:{
    menuComponent() {
      if (this.item.children && this.item.children.length > 0) {
        if(this.fullPath.split('/').length == 4){
          return 'menu-item'
        }else{
          return 'sub-menu'
        }
        
      } else {
        return 'menu-item'
      }
    },
  },
  methods:{
    handlePath(routePath){
      console.log(this.fullPath)
      return path.resolve(this.fullPath, routePath)
    }
  }
}
</script>

<style scoped>

</style>